<template>
  <view class="login">
    <view class="backg h1000rpx w750rpx flex-col flex-center">
      <u-image :src="`${$url}/profile/upload/2024/11/18/logo@2x_20241118173344A006.png`" />
      <view class="mt10rpx box-border wfull p30rpx">
        <u-form ref="formRef" :model="data" :rules="rules" class="w-full">
          <u-form-item label="学号" prop="stuCode">
            <u-input v-model="data.stuCode" placeholder="请输入你的学号" />
          </u-form-item>
          <u-form-item label="密码" prop="password">
            <u-input v-model="data.password" placeholder="请输入你的密码" type="password" />
          </u-form-item>
        </u-form>
      </view>
      <view class="text-center text-27rpx text-#3C3C43">
        登录即表示您同意我们的
        <text class="text-[#168BF2]" @click="toLoginTerms('userAgent')">
          用户协议
        </text>
        以及
        <text class="text-[#168BF2]" @click="toLoginTerms('privacyPolicy')">
          隐私政策
        </text>
      </view>
    </view>
    <view class="box-border w-full p20rpx">
      <u-button text="登录" type="primary" @click="login" />
      <view class="m-y-30rpx text-center text-30rpx text-#333333">
        或
      </view>
      <view class="flex justify-center">
        <u-icon
          :name="`${$url}/profile/upload/2024/11/18/微信图标@2x_20241118180225A007.png`"
          width="45rpx"
          height="45rpx" label="微信一键登录" space="10" label-size="30rpx" @click="loginByWechat"
        />
      </view>
    </view>
  </view>
</template>

<script setup lang='ts' name='user-login'>
import { $url, UserApi } from '@/api';
import type { ILoginReq } from '@/api/user/type';
import { useUserStore } from '@/store';
import { Loading, Toast } from '@/utils';

// 持久化
const userStore = useUserStore();

// 登陆表单
const data = ref<ILoginReq>({
  stuCode: '',
  password: '',
  code: '',
});
const formRef = ref<any>(null);
const rules = reactive({
  stuCode: [
    {
      required: true,
      message: '学号不能为空',
      trigger: ['blur'],
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      trigger: ['blur'],
    },
  ],
});

// 跳转登录条款
const toLoginTerms = (key: string): void => {
  uni.navigateTo({
    url: `/subPages/user/term/loginTerms?key=${key}`,
  });
};

// 登录
const login = (): void => {
  formRef.value.validate().then((valid: any) => {
    if (valid) {
      UserApi.userLogin(data.value).then((res) => {
        userStore.setToken(res.data.token);
        userStore.setUserInfo(res.data.userInfo);
        Toast('登录成功');
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/index/index',
          });
        }, 1000);
      });
    }
    else {
      uni.$u.toast('账号密码有误');
    }
  }).catch(() => {
    // 处理验证错误
    uni.$u.toast('账号密码有误');
  });
};

// 微信登录
const loginByWechat = (): void => {
  // 先获取用户信息授权
  uni.getUserProfile({
    desc: '登陆用于完善用户资料',
    success: (_userRes: any) => {
      // 获取授权后，再进行登录
      // 用户提示
      Loading.show('微信登录中...');
      uni.login({
        provider: 'weixin',
        success: (loginRes: any) => {
          data.value.code = loginRes.code;
          // 可以把用户信息一起传给后端
          UserApi.userLoginByWechat({
            ...data.value,
          }).then((res: any) => {
            userStore.setToken(res.data.token);
            userStore.setUserInfo(res.data.userInfo);
            uni.switchTab({
              url: '/pages/index/index',
            });
          });
        },
        fail: () => {
          uni.$u.toast('微信登录失败');
        },
        complete: () => {
          Loading.hide();
        },
      });
    },
    fail: () => {
      uni.$u.toast('用户拒绝授权');
    },
  });
};
</script>

<style lang='scss' scoped>
.login{
  .backg{
    // unocss写法 bg-gradient-to-b from-[#168BF2] via-[#168BF2] to-white
    // @apply bg-gradient-to-b from-[#168BF2] via-[#168BF2] to-white;
    background: linear-gradient(to bottom, #168BF2 60%, #FFF 100%);
  }
}
</style>
